<template>
  <div>
    <h3>巡检管理</h3>
    <a-form
      :form="form"
      layout="inline"
      @submit.prevent="onSubmit"
      :style="{ marginBottom: '20px' }"
      id="service-menu-search"
    >
      <div class="service-menu-query">
        <a-form-item>
          <a-input placeholder="请输入巡检、行业信息" v-decorator="['name']" />
        </a-form-item>
        <a-form-item :style="{ flexGrow: 1 }">
          <a-button type="primary" html-type="submit"> 筛选 </a-button>
        </a-form-item>
        <a-form-item>
          <!-- <router-link to="/check/create">
            <a-button type="primary" icon="plus">添加</a-button>
          </router-link> -->
            <a-button type="primary" icon="plus" @click="iscreate=true">添加</a-button>
        </a-form-item>
      </div>
    </a-form>
    <a-table
      :columns="columns"
      :dataSource="data"
      rowKey="id"
      :pagination="pagination"
      bordered
    >
      <template slot="indexRender" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
      </template>
      <span slot="industry" slot-scope="text, record">
        <template v-if="record.industry && record.industry.length > 0">
          <div v-for="item in record.industry" :key="item.id" style="color: #1890FF;">
            {{ item.name }}
          </div>
        </template>
        <span v-else>暂未添加</span>
      </span>
      <span slot="image" slot-scope="text, record">
        <template v-if="record && record.image">
          <a-icon
            @click.stop.prevent="handlePlayVideo(record)"
            :style="{ fontSize: '20px', color: '#08c', cursor: 'pointer' }"
            type="video-camera"
          />
        </template>
        <span v-else>暂未添加</span>
      </span>
      <span slot="video" slot-scope="text, record">
        <template v-if="record && record.video">
          <a-icon
            @click.stop.prevent="handlePlayVideo(record)"
            :style="{ fontSize: '20px', color: '#08c', cursor: 'pointer' }"
            type="video-camera"
          />
        </template>
        <span v-else>暂未添加</span>
      </span>
      <span slot="action" slot-scope="text, record">
        <router-link :to="'/check/update/' + record.id">
          <img src="./../../assets/images/view.svg" alt="" />
        </router-link>
        <img
          @click.stop.prevent="handleDelete(record)"
          src="./../../assets/images/delete.svg"
          alt=""
        />
      </span>
    </a-table>

    <a-modal centered v-model="videoVisible" title="播放视频">
      <video
        width="470"
        height="300"
        :src="selectRecord.video"
        controls="controls"
        ref="videod"
      >
        您的浏览器不支持 video 标签。
      </video>
      <div slot="footer">
        <a-button
          @click.stop.prevent="closevideo"
          style="display: inline-block; margin: 0 auto"
          type="primary"
          >关闭</a-button
        >
      </div>
    </a-modal>

    <a-modal title="提示" :visible="showcase">
      <p>您输入的页数超过了现有的页数,请重新输入!!</p>
      <template slot="footer">
        <a-button @click="showcase = false">确定</a-button>
      </template></a-modal
    >

<!-- 新增巡检管理弹框 -->
  <a-modal title="新增巡检管理" :visible="iscreate" @cancel="handleCancel">
      <create ref="oncreate" @close="handleCancel"></create>
      <template slot="footer">
        <div class="footer-wrap">
          <a-button @click="iscreate = false" type="warning">取消</a-button>
        <a-button @click="onSubmits" type="primary">确认</a-button>
        </div>
      </template></a-modal
    >
<!-- 新增巡检管理弹框end -->

  </div>

</template>

<script>
import create from './create'
export default {
  components:{
    create
  },
  name: "check",
  data() {
    return {
      iscreate:false,//
      form: this.$form.createForm(this),
      search: {},

      data: [],
      columns: [
        {
          title: "序号",
          scopedSlots: { customRender: "indexRender" },
          align: "center",
        },
        { title: "巡检编号", dataIndex: "number", align: "center" },
        { title: "巡检名称", dataIndex: "name", align: "center" },
        { title: "价格", dataIndex: "price", align: "center" },
        { title: "巡检类型", dataIndex: "typeName", align: "center" },
        { title: "最小单位", dataIndex: "unit", align: "center" },
        {
          title: "对应行业",
          scopedSlots: { customRender: "industry" },
          align: "center",
        },
        {
          title: "视频",
          scopedSlots: { customRender: "video" },
          align: "center",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showQuickJumper: true,
        
        onChange: (page, size) => {
          this.handleChange(page, size);
        },
      },
      videoVisible: false,
      selectRecord: {},
      cateList: {},
      showcase: false,
    };
  },
  methods: {
    handleCancel(){
      this.iscreate = false;
    },
    
    //触发子组件创建巡检方法
    onSubmits(){
      this.$refs.oncreate.onSubmit();
      this.getList()
    },
    
    //关闭视频的同时暂停播放视频
    closevideo(event) {
      this.videoVisible = false;
      this.$refs.videod.pause();
    },
    async getList(param = {}) {
      let req = {
        pageSize: this.pagination.pageSize,
        pageNo: this.pagination.current,
      };

      let {
        data: { data, totalCount },
      } = await this.http(
        "get",
        "/inspection/selectLikeList",
        Object.assign(req, param)
      );
      this.data = data || [];
      this.pagination.total = totalCount;
    },
    async getCateList() {
      let resp = await this.http("get", "/inspection/types", {
        page: 1,
        page_size: 10000,
      });
      this.cateList = resp ? resp : {};
    },
    handleChange(page, size) {
        this.pagination.current = page;
        this.pagination.pageSize = size;
        this.getList();

    },
    onSubmit() {
      //搜索提交
      this.form.validateFields((err, values) => {
        if (!err) {
          this.pagination.current = 1;
          this.search = values;
          this.getList(values);
        }
      });
    },

    handleDelete(record) {
      console.log(record);
      this.$confirm({
        title: "系统提示",
        content: "确定要删除吗？",
        onOk: async () => {
          let { status } = await this.http(
            "delete",
            `/inspection/delete/${record.id}`
          );
          if (status === 1) {
            this.$message.success("删除成功!", 1);
            if (this.data.length === 1) {
              this.pagination.current = 1;
            }
            this.getList(this.search);
          } else {
            this.$message.error("删除失败!", 1);
          }
        },
        onCancel() {},
      });
    },
    handlePlayVideo(record) {
      this.videoVisible = true;
      this.selectRecord = record;
    },

  },
  mounted() {
    this.getList();
    this.getCateList();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/scss/mixin";
.footer-wrap{
  display: flex;
}
#service-menu-search {
  .ant-input {
    width: 250px;
  }
}

.service-menu-query {
  @include fj(flex-start);
  .ant-form-item + .ant-form-item {
    margin-left: 10px;
  }
}
</style>
